<template>
	<view class="servelist">
		<!-- 左 -->
		<scroll-view class="serve-left" :style="{height:wh+'px'}">
			<view class="serve-left-box">
				<!-- <view class="serve-left-item" :class="{active:twoIndex == index}" v-for="(item,index) in ServeList"
					:key="item.id" @click="serveItems(index,item.id)">{{item.name}}</view> -->

				<view class="serve-left-item">
					{{ServeList.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 右 -->
		<scroll-view class="serve-right" :style="{height:wh+'px'}">
			<!-- <view class="right-title">{{ ServeList[twoIndex].name }}</view> -->
			<view class="item-box" v-for="item in ProductList" :key="item.id" @click="ToDetail(item)">
				<view class="box-left">
					<u-image :src="item.image" width="215rpx" height="145rpx" border-radius="20rpx"></u-image>
				</view>
				<view class="box-right">
					<view class="box-title">{{ item.title }}</view>
					<view class="box-desc">已服务{{item.people_number }}次</view>
					<view class="box-price">￥{{ item.price }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { ResProductTy, ResProductList } from '@/untils/api.js'
	export default {
		data() {
			return {
				wh: '',
				twoIndex: '',
				ServeList: [],
				ProductList: [],
				// Obid: {
				// 	id: ''
				// }
			}
		},
		onShow() {
			// 获取页面可操作高度
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
		},
		onLoad(option) {
			this.ServeList = JSON.parse(option.data)
			this.ProductList = JSON.parse(option.datatwo)

			// this.ServeList = JSON.parse(option.data)
			// let idtwo = {
			// 	id: option.idtwo
			// }
			// // this.ResProductTy(idone)
			// this.getProductList(idtwo)
			// this.twoIndex = option.index
		},
		methods: {
			ToDetail(item) {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${item.id}`
				})
				uni.setNavigationBarTitle({
					title: item.title
				})
			},
			serveItems(index, id) {
				// this.Obid.id = id
				this.twoIndex = index
				// this.getProductList(this.Obid)
			},
			// // 请求左侧分类
			// async ResProductTy(id) {
			// 	const { data: res } = await ResProductTy(id)
			// 	this.ServeList = res.data.reverse()
			// },
			// async getProductList(id) {
			// 	const { data: res } = await ResProductList(id)
			// 	this.ProductList = res.data.data
			// 	console.log(res, '服务分类');
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.servelist {
		height: 100%;
		display: flex;


		.serve-left {
			width: 215rpx;
			background-color: #f7f7f7;
			text-align: center;

			.serve-left-box {
				.serve-left-item {
					line-height: 90rpx;
				}

				.active {
					color: #01C3A8;
				}
			}
		}

		.serve-right {
			flex: 1;
			padding: 0 45rpx 0 30rpx;

			.right-title {
				color: #898A8F;
				font-size: 22rpx;
			}

			.item-box {
				margin-top: 55rpx;
				display: flex;

				.box-right {
					margin-left: 20rpx;
					width: 100%;

					.box-title {
						font-weight: 700;
						font-size: 24rpx;
					}

					.box-desc {
						color: #9A9A9A;
						font-size: 22rpx;
						margin: 12rpx 0 24rpx;
					}

					.box-price {
						color: #F56803;
						font-size: 28rpx;

					}
				}
			}
		}


	}
</style>
